<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #goods_title:hover{
            color: red;
            cursor: pointer;
        }

        #loginBtn:hover{
            color: red;
            cursor: pointer;
        }
    </style>

</head>
<body>

<!--头部-->
<div style="margin-top: 15px;display: flex;align-items: center">
    <div style="width: 40%">
        <img src="/images/index/logo.png"/>
    </div>
    <div style="width: 40%;">
        <div style="display: flex;border:solid red 3px;">
            <div style="width: 80%">
                <input style="height: 30px;width: 100%;border: none" type="text">
            </div>
            <div style="color: white;background: red;padding: 5px 10px;width: 20%;text-align:
            center">
                搜索
            </div>
        </div>
    </div>
    <div
            style="cursor: pointer;width: 20%;text-align: center;border: solid lightgray 1px;background:
            rgb(245,245,245);padding:
            7px;color: red;margin-left:30px;">
        我的购物车(2)
    </div>
    <div id="loginBtn" onclick="window.location='/pages/front/loginPage'"
            style="width: 40px;text-align: center;border: solid lightgray 1px;background:
            rgb(245,245,245);padding:
            7px;margin-left:10px;">
        登录
    </div>
</div>

<div style="display: flex">
    <div style="width: 20%;border: solid red;">

        <div style="display: flex;align-items: center" th:each="x:${#numbers.sequence(1,6)}">
            <div>电子产品</div>
            <div style="display: flex;flex-wrap: wrap">
                <div style="margin: 5px">电脑</div>
                <div style="margin: 5px">手机</div>
                <div style="margin: 5px">平板</div>
                <div style="margin: 5px">智能手表</div>
                <div style="margin: 5px">耳机</div>
                <div style="margin: 5px">智能家居</div>
                <div style="margin: 5px">其他</div>
            </div>
        </div>

    </div>
    <div style="width: 80%;border: solid blue;display: flex;flex-wrap: wrap;padding: 10px 10px;">
        
        <div style="padding: 10px;border: solid lightgray 1px;box-shadow: 0 0 5px lightgray;width: 18%;margin: 20px"
             th:each="x:${#numbers.sequence(1,12)}">
            <div>
                <img src="/images/index/phone.jpg"/>
            </div>
            <div style="color: orangered">
                ￥<span style="font-size: 20px">2099</span>
            </div>
            <div id="goods_title" style="padding: 5px">
                荣耀9X 麒麟810 4000mAh续航 4800万超清夜拍 6.59英寸升降全面屏 全网通
            </div>
            <div style="padding: 5px;color: #626293;font-size: 10px;font-weight: bold">
                77万+<span style="color: grey">条评价</span>
            </div>
            <div style="padding: 5px;color: grey;font-size: 12px">京东自营旗舰店</div>
        </div>
        
    </div>
</div>

</body>
</html>